<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas height="600" width="800"></canvas>

    <script>

        var sun = new Image();
        var moon = new Image();
        var earth = new Image();
        function init(){
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            window.requestAnimationFrame(draw);
        }

        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');

        function draw() {
            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 600, 600);

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150, 150);

            var time = new Date();
            ctx.rotate((2*Math.PI/60) * time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds())
            ctx.translate(105, 0);
            ctx.fillRect(0, -12, 50, 24);
            ctx.drawImage(earth, -12, -12);

            ctx.save();
            ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
            ctx.translate(0,28.5);
            ctx.drawImage(moon,-3.5,-3.5);
            ctx.restore();

            ctx.restore();
    
            ctx.beginPath();
            ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
            ctx.stroke();
            
            ctx.drawImage(sun,0,0,300,300);

            window.requestAnimationFrame(draw);
        }

        init();

    </script>
</body>
</html>